import { ElForm, ElFormItem } from 'element-plus';
import 'element-plus/es/components/form/style/index';
import { PropType } from 'vue';
import './index.scss';

export const MciForm = defineComponent({
  name: 'MciForm',
  props: {
    model: {
      type: Object as PropType<Record<string, any>>,
      default: () => ({})
    },
    rules: {
      type: Object as PropType<Record<string, any>>,
      default: () => ({})
    }
  },
  setup() {
    const elForm = ref<any>();

    const validate = (cb?: any) => {
      return elForm.value?.validate(cb);
    };

    const reset = () => {
      elForm.value?.resetFields();
    };

    return {
      elForm,
      reset,
      validate
    };
  },
  render() {
    return <ElForm ref="elForm" class="mci-form" rules={this.rules} model={this.model} vSlots={this.$slots} />;
  }
});

export const MciFormItem = ElFormItem;
